<template>
    <div class="preview-operation">
        <div class="preview-list">
            <div class="preview-row" v-for="item in tab_data" :key="item.id">
                <div
                    class="title"
                    :class="acitve_id == item.id ? 'acitve' : ''"
                    v-if="item.title"
                    @click="tabcheFun(item)">
                    {{ item.title }}
                </div>
                <!-- 产品导航列表 -->
                <div class="good-list" v-if="item.list">
                    <div
                        class="title"
                        v-for="items in item.list"
                        :key="items.id"
                        :class="goodActId == items.id ? 'acitve' : ''"
                        @click="
                            tabgoodcheFun(item, items);
                            edit({
                                act: action.editGoods,
                                data: items.gd_pos,
                                type: '1',
                            });
                        "
                    >
                        {{ items.gd_title }}
                    </div>
                </div>
            </div>
        </div>
        <div class="preview-app">
            <!-- 预览窗口 -->
            <div class="app-box">
                <!-- 广告页 -->
                <adverHomePage
                    ref="adverHomePage"
                    v-show="acitve_id == 1"
                ></adverHomePage>
                <!-- 活动密码 -->
                <interactivePwPage
                    ref="interactivePwPage"
                    v-show="acitve_id == 2"
                ></interactivePwPage>
                <!-- 首页 -->
                <advertisement
                    ref="advertisement"
                    v-show="acitve_id == 3"
                ></advertisement>
                <!-- 所有订单 -->
                <allOrderPage
                    ref="allOrderPage"
                    v-show="acitve_id == 4"
                ></allOrderPage>
                <!-- 产品编辑 -->
                <editGoodsInfo
                    ref="editGoodsInfo"
                    :gdId="goodActId"
                    :gdInfo="gdInfo"
                    v-show="acitve_id == 5"
                    @editGoodsSpwerPic="editGoodsSpwerPic"
                ></editGoodsInfo>
                <!-- 确认订单 -->
                <orderComfit
                    ref="orderComfit"
                    v-show="acitve_id == 6"
                ></orderComfit>
                <!-- 活动说明 -->
                <editActiveDescript
                    ref="editActiveDescript"
                    v-show="acitve_id == 7"
                ></editActiveDescript>
                <!-- 产品详情 -->
                <activeGoodsDetails
                    ref="activeGoodsDetails"
                    v-show="acitve_id == 8"
                ></activeGoodsDetails>
                <!-- 联系信息 -->
                <concatsAdress
                    ref="concatsAdress"
                    v-show="acitve_id == 9"
                ></concatsAdress>
                <!-- 分享效果 -->
                <activeShareEffect
                    ref="activeShareEffect"
                    v-show="acitve_id == 10"
                ></activeShareEffect>
            </div>
        </div>
        <!-- 功能未完善 -->
        <!-- <div class="skin-moduel-box" >
            <div class="skin-btn-box" @click="isReplaceSkinShow = true">
                <div class="txt">更换<br />皮肤</div>
            </div>
            <div class="mod-btn-box">
                <div class="txt">页面<br />模块</div>
            </div>
        </div> -->
        <el-drawer
            title="产品轮播图"
            :visible.sync="is_drawer"
            class="drawer-box"
            @close="closePopInsertImgTxt"
        >
            <popInsertImg
                ref="popInsertImg"
                :is_drawer="is_drawer"
                :idyun="idyun"
            ></popInsertImg>
        </el-drawer>
        <el-drawer
            title="更换皮肤"
            :visible.sync="isReplaceSkinShow"
            class="drawer-box"
            @close="isReplaceSkinShow = false"
        >
            <replaceSkin></replaceSkin>
        </el-drawer>
    </div>
</template>

<script>
import replaceSkin from "@/components/replaceSkin/index.vue"; // 更换皮肤
import popInsertImg from "@/components/cloudShop/popInsertImg.vue";
import adverHomePage from "@/components/interactive/appComponrnts/adver-home-page.vue";
import interactivePwPage from "@/components/interactive/appComponrnts/interactive-password-page.vue";
import advertisement from "@/components/interactive/appComponrnts/advertisement.vue";
import allOrderPage from "@/components/interactive/appComponrnts/allOrderPage.vue";
import editGoodsInfo from "@/components/interactive/appComponrnts/edit-goods-info.vue";
import orderComfit from "@/components/interactive/appComponrnts/order-comfit.vue";

import editActiveDescript from "@/components/interactive/appComponrnts/eidt-active-descript.vue";

import activeGoodsDetails from "@/components/interactive/appComponrnts/active-goods-details.vue";

import concatsAdress from "@/components/interactive/appComponrnts/concats-adress.vue";

import activeShareEffect from "@/components/interactive/appComponrnts/active-share-effect.vue";

import config from "@/js/conf/Config.js";
import editActiveGoods from "@/js/inieractive/EditActiveGoods.js";
import editInterActive from "@/js/inieractive/EditInteractive.js";
export default {
    props: [],
    components: {
        advertisement,
        interactivePwPage,
        adverHomePage,
        allOrderPage,
        editGoodsInfo,
        orderComfit,
        editActiveDescript,
        activeGoodsDetails,
        concatsAdress,
        activeShareEffect,
        popInsertImg,
        replaceSkin,
    },
    computed: {},
    data() {
        return {
            action: editActiveGoods.action,
            action2: editInterActive.action,
            is_drawer: false,
            isReplaceSkinShow: false,
            idyun: "",
            gdInfo: {},
            activeData: {},
            hdongid: "",
            acitve_id: 1,
            goodActId: "",
			
			gdListDeatail:[],//产品详情,follow按钮皮肤
			
			gdExchDeatPage:
			{
				bgColor:"#3388FF",
			},
            tab_data: [
                {
                    id: 1,
                    title: "广告页",
                },
                {
                    id: 2,
                    title: "活动密码",
                },
                {
                    id: 3,
                    title: "首页",
                },
                {
                    id: 4,
                    title: "所有订单",
                },
                {
                    id: 5,
                    title: "",
                    list: [],
                },
                {
                    id: 6,
                    title: "确认订单",
                },
                {
                    id: 7,
                    title: "活动说明",
                },
                {
                    id: 8,
                    title: "产品详情",
                },
                {
                    id: 9,
                    title: "联系信息",
                },
                {
                    id: 10,
                    title: "分享效果",
                },
            ],
        };
    },
    created() {
        this.hdongid = this.$geturl().hdongid || "";
        this.idyun = this.$geturl().idyun || "";
    },
    mounted() {
        // if (this.hdongid) {
		this.loadInitData();
        // }
        uni.$on("interactive_cursor", (data) => {
            this.interactEidt(data); //执行数据
        });
        uni.$on("add_set_goods", (data,gdActiveName) => {
            this.addSetgoods(data,gdActiveName); //执行数据
        });
        uni.$on("edit_goods2", (data,gdInfo) => {
            this.setgoodTab(data,gdInfo); //执行数据
        });
		
		uni.$on("interactive_edit_action",(data)=>{
			this.update(data);
		});
		
		uni.$on("interactive_edit_goods",(data)=>{
			this.update(data);
		});
    },
    methods: {
		update(data)
		{
			// if(data.act == this.action2.creatorActive)
			// {
			// 	this.$refs.advertisement.update(data);
			// }else
			if(data.act == this.action2.adverPagePic)
			{
				this.$refs.adverHomePage.initData(data.data);
			}
			else if(data.act == this.action2.editActiveTitle) //更新活动标题
			{
				uni.$emit('init_active_title',data.data);
			}
			else if(data.act == this.action2.editCpLogo)
			{
				this.$refs.advertisement.update(data);
			}
			else if(data.act == this.action2.edidShareImg || data.act == this.action2.edidShareContext)
			{
				if(this.$refs.activeShareEffect)
					this.$refs.activeShareEffect.update(data);
			}
			else if(data.act == this.action2.editFlowBtnContext)
			{
				this.$refs.advertisement.update(data);
			}
			else if(data.act == this.action.editGoodsTitle)//产品名称更新
			{
				this.$refs.activeGoodsDetails.update(data);
				this.$refs.advertisement.update(data);
				this.gdInfo.title = data.data.gd_name;
				this.gdInfo.qty = data.data.qty;
				this.gdInfo.price0 = data.data.price0;
				this.gdInfo.price = data.data.price;
				this.gdInfo.editGoodsLimitBuy = data.data.max_unum;
				this.gdInfo.rNum = 5;
				let bttn = data.data.set_gd_init.onoff_line_1.bttn;//产品关注按钮
				let btnName = bttn['type_' + bttn.type] ? bttn['type_' + bttn.type].bttname :'按钮功能未开启';
				this.gdInfo.bttname = btnName;
				this.$refs.editGoodsInfo.updateBtnName(btnName);
			}
			else if(data.act == this.action2.editGoodsCouponsChange)//产品操作提示
			{
				this.$refs.activeGoodsDetails.update(data);
			}
			else if(data.act == this.action.editGoodsDesc)
			{
				let desc = data.data;
				if(desc)
				{
					// this.gdInfo.gdDescTxt = desc.txt;
					this.gdInfo.gdDesc = [];
					let arr = [];
					if(desc.txt_arr)
					{
						desc.txt_arr.forEach((s)=>{
							let temp = {};
							temp.text = s.txt;
							temp.imgs = [];
							let imgObj = {};
							imgObj.img_url = s.img[0].url || "";
							temp.imgs.push(imgObj);
							arr.push(temp);
						});
					}
					this.gdInfo.gdDesc = arr;
				}
			}
			else if(data.act == this.action2.edidDescripTxtContext)
			{
				this.$refs.editActiveDescript.updateDescript(data.data);
			}
			
			else if(data.act == this.action2.updateSkin)
			{
				this.$refs.advertisement.updateSkin(data.data.homePage);
				this.$refs.editActiveDescript.updateSkin(data.data.activeDescPage)
				this.$refs.activeGoodsDetails.updateSkin(data.data.gdExchDeatPage);
			}
			else if(data.act == this.action.addNewGoodsDetialSkin)
			{
				let obj = data.data;
			    let isHas = false; 
				this.gdListDeatail.forEach((s)=>{
					if(s.gd_pos == obj.gd_pos)
					{
						s = obj;
						isHas = true;
					}
				});
				if(!isHas)
					this.gdListDeatail.push(obj);
				console.log("this.gdListDeatail===:",this.gdListDeatail)
			}
		},
		
        setgoodTab(data,gdInfo) {
            this.acitve_id = "";
            this.goodActId = data;
            this.tab_data.map((v) => {
                if (v.list) {
                    v.list.map((vs) => {
                        if (vs.gd_pos === data) {
                            this.tabgoodcheFun(v, vs, "1");
                        }
                    });
                }
            });
			if(!gdInfo)return;
			if(this.$refs.activeGoodsDetails)
			{
				this.$refs.activeGoodsDetails.setGdInfo(gdInfo);
				
			}
        },
		
        editGoodsSpwerPic() {
            this.is_drawer = true;
            setTimeout(() => {
                let data = {
                    info: [],
                };
                this.gdInfo.imgs.map((v) => {
                    data.info.push({
                        img: [
                            {
                                url: v.img_url || "",
                                urls: v.img || "",
                            },
                        ],
                    });
                });
                this.$refs.popInsertImg.initData(data);
            }, 200);
        },
        // 编辑完图片提交
        closePopInsertImgTxt() {
            const data = this.$refs.popInsertImg.form;
            this.gdInfo.imgs = [
                {
                    img_url: "",
                    img: "",
                },
            ];
            data.info.map((v) => {
                if (v.img[0].url) {
                    this.gdInfo.imgs.unshift({
                        img_url: v.img[0].url || "",
                        img: v.img[0].urls || "",
                    });
                }
            });

            const obj = {
                act: this.action.editGoodsSpwerPic,
                data: {
                    gd_pos: this.gdInfo.gd_pos,
                    img: this.gdInfo.imgs,
                    type: "1",
                },
            };
            editActiveGoods.eidt(obj);
        },
		
		//更新产品介绍
		updateGddescript(data)
		{
			
		},
		
        // 获取增加减少的产品列表
        addSetgoods(data,gdActiveName) {
			if(this.tab_data)
			{
				this.tab_data.map((v) => {
				    if (v.id == 5) {
				        v.list = data;
				    }
				});
			}
			let gd = null;
			data.map((s)=>{
				if(gdActiveName=== s.gd_pos)
				{
					gd = s;
				}
			});
			if(gd)
			{
				if(this.$refs.activeGoodsDetails)
					this.$refs.activeGoodsDetails.setGdInfo(gd);
			}
        },
        interactEidt(data) {
            if (data.act === this.action2.editActiveDircs) {
                this.tabcheFun({ id: 7 });
            }
        },
		
        // 选中tab
        tabcheFun(item) {
            this.acitve_id = item.id;
            this.goodActId = "";
        },
		
        // 选中产品tab
        tabgoodcheFun(item, items, type = null) {
            if (this.goodActId == items.id && !type) return;
            this.acitve_id = item.id;
            this.goodActId = items.id;
            this.gdInfo = {
                id: items.id,
                gd_pos: items.gd_pos,
                title: items.gd_name,
                price: items.price,
                price0: items.price0,
                qty: items.qty,
                editGoodsLimitBuy: items.max_unum,
				rNum : 5,
				
                gdDesc: [],
                imgs: [
                    {
                        img_url: "",
                        img: "",
                    },
                ],
				
            };
			
			let bttn = items.set_gd_init.onoff_line_1.bttn;//产品关注按钮
			let btnName = bttn['type_' + bttn.type] ? bttn['type_' + bttn.type].bttname :'按钮功能未开启';
			this.gdInfo.bttname = btnName;
			this.$refs.editGoodsInfo.updateBtnName(btnName);
			
			if(this.gdListDeatail && this.gdListDeatail.length > 0)
			{
				this.gdListDeatail.forEach((s)=>{
					if(items.gd_pos == s.gd_pos)
					{
						this.$refs.editGoodsInfo.updateUpdateSkin(s);
					}
				});
			}
			
            if (items.img) {
                items.img.map((v) => {
                    this.gdInfo.imgs.unshift({
                        img_url: v.img_url,
                        img: v.img,
                    });
                });
            }
            items.info.map((v) => {
                this.gdInfo.gdDesc.push({
                    text: v.txt,
                    imgs: [],
                });
            });
            this.gdInfo.gdDesc.map((v, i) => {
                v.imgs.push({
                    img_url: items.info[i].img[0].url || "",
                    img: items.info[i].img[0].urls || "",
                });
            });
        },
		
		gdFollowSkin(data)
		{
			this.gdListDeatail.forEach((s)=>{
				if(data.gd_pos == s.gd_pos)
				{
					s.follow.color = data.follow.color;
					s.follow.bgColor = data.follow.bgColor;
				}
			});
		},

        edit(data) {
            editActiveGoods.eidt(data);
        },
        
        async loadInitData() {
            let url = config.HD_MS_HDONG_EVENT_LS;
            let param = {hdongid: this.hdongid?this.hdongid:""};
            let res = await this.$api({ url: url, data: param, showLoading: true, showToast: false });
			if(!res)return;
            if (res.status == 1) {
                if (!res.data) return;
                res = res.data;
                if (res.hd_ad) {
                	let obj = {};
                	obj.imgs = res.hd_ad.img_url;
                	obj.time_long = res.hd_ad.time_long;
                	this.$nextTick(()=>{
                		this.$refs.adverHomePage.initData(obj);
                	})
                }
                
                if (res.hd_set) {
					if(res.hd_set.set_skin)
						this.gdListDeatail = res.hd_set.set_skin.gdListDeatail;
                    let pw = res.hd_set.pw;
                	this.$nextTick(()=>{
                		this.$refs.interactivePwPage.initData(pw);
                	});
                }
                
                this.$nextTick(()=>{
                	this.$refs.advertisement.initData(res);
                	this.$refs.editGoodsInfo.initData(res);
                });
                if (res.hd_info) {
                    uni.$emit("init_active_title", res.hd_info.title);
                }
            } else if (res.status == -1) {
                this.$alert(res.msg, '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        uni.redirectTo({
                            url: "/pages/interactiveOrder/my-activities",
                        })
                    }
                });
                
            }
        },
    },
};
</script>

<style lang="scss" scoped >
.preview-operation {
    height: 100%;
    display: flex;
    position: relative;
    .preview-list {
        width: 120px;
        background: #fff;
        .preview-row {
            .title {
                font-size: 14px;
                padding: 10px;
                cursor: pointer;
                &:hover {
                    background: #fff9f9;
                }
                &.acitve {
                    color: #3989fc;
                }
            }
        }
    }
    .preview-app {
        position: relative;
        .app-box {
            border: 1px solid #ccc;
            position: absolute;
            width: 375px;
            height: 754px;
            left: 100px;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    }

    .skin-moduel-box {
        position: absolute;
        right: 25px;
        top: 80px;
        .skin-btn-box,
        .mod-btn-box {
            margin: 10px 0;
            width: 50px;
            height: 50px;
            border-radius: 25px;
            overflow: hidden;
            text-align: center;
            line-height: 50px;
            background-color: #fff;
            cursor: pointer;
            .txt {
                padding-top: 10px;
                padding-left: 5px;
                width: 40px;
                height: 40px;
                color: #ff6600;
                line-height: 14px;
                // padding: 0 10px;
                // word-wrap: break-word;
                // word-break: break-all;
                // white-space: pre-wrap !important;
            }
        }
        .mod-btn-box {
            .txt {
                // width: 40px;
                color: #3388ff;
            }
        }
    }
}
</style>
